<div bsModal #createPersonModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createPersonModal" aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">

      <div #modalContent class="modal-content">

          <form *ngIf="active" #createPersonForm="ngForm" id="frm_create_person" novalidate (ngSubmit)="save()">

              <div class="modal-header">
                  <button type="button" class="close" (click)="close()" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title">
                      <span>{{l("CreateNewPerson")}}</span>
                  </h4>
              </div>
              <div class="modal-body">
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input id="name" type="text" name="Name" [(ngModel)]="person.name" required maxlength="32" minlength="2" class="validate form-control">
                                <label for="name" class="form-label">{{l("Name")}}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input id="email" type="email" name="Email" [(ngModel)]="person.email" maxlength="80" minlength="2" class="validate form-control">
                                <label for="email" class="form-label">{{l("Email")}}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="row clearfix">
                  <div class="col-sm-6">
                      <div class="form-group form-float">
                          <label>{{l("PhoneNumberType")}}</label>
                          <select name="phoneNumberType" [(ngModel)]="phoneNumber.type" class="form-control selectpicker">
                              <option value="1">{{l("Mobile")}}</option>
                              <option value="2">{{l("Home")}}</option>
                              <option value="3">{{l("Company")}}</option>
                          </select>
                      </div>
                  </div>
                  <div class="col-sm-6">
                      <div class="form-group form-float">
                          <div class="form-line">
                              <input id="phoneNumber" type="text" name="phoneNumber" [(ngModel)]="phoneNumber.number" maxlength="12" minlength="2" class="validate form-control">
                              <label for="phoneNumber" class="form-label">{{l("PhoneNumber")}}</label>
                          </div>
                      </div>
                  </div>
                </div> -->
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input id="address" type="text" name="Address" [(ngModel)]="person.address" maxlength="32" minlength="2" class="validate form-control">
                                <label for="address" class="form-label">{{l("Address")}}</label>
                            </div>
                        </div>
                    </div>
                </div>
              </div>

              <div class="modal-footer">
                  <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                      {{l("Cancel")}}
                  </button>
                  <button [disabled]="!createPersonForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
                      {{l("Save")}}
                  </button>
              </div>

          </form>
      </div>
  </div>
</div>